<template>
  <div></div>
</template>
<script setup>
import * as THREE from 'three'
//创建场景和相机
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)
camera.position.z = 2
//用几何体模型和材质创建网络基类
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial()
const mesh = new THREE.Mesh(geometry, material)
// 把网络基类加到场景上
scene.add(mesh)
// 创建渲染器并加到dom上
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
// 渲染器渲染场景和相机,递归执行
const animate = () => {
  requestAnimationFrame(animate)
  mesh.rotation.x += 0.05
  mesh.rotation.y += 0.05
  renderer.render(scene, camera)
}
animate()
</script>
